import React from 'react';
import { Radio, Space, Typography } from 'antd';
import { Question } from '@/types/question';
import MarkdownEditor from '@/components/MDEditor';
import styles from './Question.module.css';

const { Text } = Typography;

interface SingleChoiceQuestionProps {
  question: Question;
  readOnly?: boolean;
  value?: string;
  onChange?: (value: string) => void;
}

const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
  question,
  readOnly = true,
  value,
  onChange,
}) => {
  return (
    <div className="single-choice-question">
      <div className="question-content">
        <MarkdownEditor 
          value={question.content} 
          preview="preview" 
          readOnly 
        />
      </div>
      <div className={styles.optionsContainer}>
        <Radio.Group
          value={value}
          onChange={e => onChange?.(e.target.value)}
          disabled={readOnly}
          className={styles.optionsList}
        >
          {question.choices?.map(choice => (
            <div 
              key={choice.id} 
              className={`${styles.optionItem} ${value === choice.id ? styles.selected : ''}`}
              onClick={() => !readOnly && onChange?.(choice.id)}
            >
              <Radio value={choice.id} className={styles.optionRadio}>
                <span className={styles.optionContent}>
                  {choice.content}
                </span>
              </Radio>
            </div>
          ))}
        </Radio.Group>
      </div>
    </div>
  );
};

export default SingleChoiceQuestion; 